<script setup>
import axios from "@/axios/index.js";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

let tableData = ref([])
let pagination = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 5
})
let multipleSelection = ref([])

//状态值
let status=ref(0)

let rowData = ref({
  id:'',
  questionTitle: '',
  analysis:'',
  questionType:'',
  studentId:'',
  status:'',
  createTime:''
})

function  getQuestionTypeText(questionType) {
  switch (questionType) {
    case '0':
      return "单选";
    case '1':
      return "多选";
    case '2':
      return "判断";
    case '3':
      return "主观题";
    case '4':
      return "编程题";
    default:
      return "未知类型";
  }
}

const handleSelectionChange = (value) => {
  multipleSelection = value
}

// 审批
function updateStatus(row,id, status) {
  rowData.value = row

  if (!id) {
    alert('ID不能为空');
    return;
  }

  if (rowData.value.status !== 0) {
    ElMessage({
      message: '已审批，不能重复审批',
      type: 'warning'
    })
    return;
  }

  axios.put(`/api/v1/admin/verify/questions`, {
    id,
    status
  },{ headers: { 'content-type': 'application/json' } }).then(response => {
    ElMessage({
      message: '审批成功',
      type: 'success'
    })
    initData(); // 更新状态后重新加载表格数据
  }).catch(error => {
    ElMessage({
      message: '审批失败',
      type: 'error'
    })
  });
}


function initData() {
  axios.get("/api/v1/admin/verify/questions/selectAll", {params: {currentPage: pagination.currentPage,pageSize: pagination.pageSize}}).then(resp => {
    if (resp.data.code === 200) {
      tableData.value = resp.data.data.data;
      pagination.total = resp.data.data.total;
    }
  })

}

/**
 * 改变当前页时触发事件
 */
function handleCurrentChange(curPage) {
  pagination.currentPage = curPage
  initData()
}

/**
 * 改变每页数据量大小时触发
 */
function handleSizeChange(curSize) {
  pagination.pageSize = curSize
  initData()
}

initData();

</script>
<template>

  <div class="table">
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%;margin-left: auto;text-align: center"
        @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="ID" width="60"/>
      <el-table-column prop="questionTitle" label="题目名称" />
      <el-table-column prop="analysis" label="参考答案"  width="120" show-overflow-tooltip/>
      <el-table-column prop="questionType" label="题目类型" width="120">
        <template #default="scope">
          <span>{{getQuestionTypeText(scope.row.questionType)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="180"/>
      <el-table-column prop="staffName" label="添加人（员工）" align="center" width="120"/>
      <el-table-column prop="studentName" label="添加人（学生）" align="center" width="120"/>
      <el-table-column label="状态" width="120" align="center">
        <template v-slot="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 0 ? 'info' : 'danger'">
            {{scope.row.status === 1 ? '审批已通过' : scope.row.status === 0 ? '未审批' : '审批不通过'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" align="center" >
        <template #default="scope">
            <el-link type="success" v-model="scope.row.status" @click="updateStatus(scope.row,scope.row.id, 1)">审批通过</el-link>
            <el-link type="danger" v-model="scope.row.status" @click="updateStatus(scope.row,scope.row.id, 2)">审批驳回</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        size="small"
        :background="true"
        :page-sizes="[5,10,15,20,30,50,70,100]"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.table{
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 50px;
}

.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}


</style>